<template>
    <div class="address-list">
        <address-list-item v-for="address in addresses"
                           :key="address.id"
                           :switchable="switchable"
                           :address="address"
                           :checked="value === address.id"
                           @click="$emit('change', address.id)"/>
    </div>
</template>

<script>
  import { CellGroup, NavBar } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import AddressListItem from "@/components/address/AddressListItem"

  export default {
    name: "AddressList",
    components: {
      AddressListItem,
      WhiteSpace,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
    },
    model: {
      prop: "value",
      event: "change",
    },
    props: {
      value: String,
      switchable: Boolean,
      addresses: {
        type: Array,
      },
    },
  }
</script>

<style lang="scss" scoped>
    .address-list {


    }
</style>
